<template>
  <!-- 数据看板页 -->
  <div class="bigDataPage">
    <div class="mapBox">
      <template v-if="mapPositionArr.length">
        <div
          class="mapInfoBox"
          :class="n.assetsNum === '-' ? 'hideMapInfo' : ''"
          v-for="(n, i) in mapPositionArr"
          :key="i"
          :style="{ left: `${n.left}`, top: `${n.top}` }"
        >
          <div class="mapInfoName">{{ n.name }}</div>
          <div>
            <span> {{ n.assetsNum }} 处</span
            ><el-divider class="mapInfoDivider" direction="vertical" /><span
              >{{ n.assetsArea }} {{ n.assetsAreaUnit }}</span
            >
          </div>
        </div>
      </template>
    </div>
    <div class="topBox">
      <div
        class="itemStyle cursor"
        v-for="(n, i) in topItemArr"
        :key="i"
        @click="goItemPage(i)"
      >
        <img :src="n.url" alt="" />
        <div class="itemListStyle">
          <div class="listBox" v-for="(m, j) in n.itemListArr" :key="j">
            <span class="listTitleBox">{{ m.title }}</span>
            <span class="listValueBox">{{ m.value }} {{ m.unit }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="bigBtnBox">
      <img src="@/assets/iconImg/home-bigbtn2.png" alt="" @click="goNewLease" />
      <img
        src="@/assets/iconImg/home-bigbtn1.png"
        alt=""
        @click="goReturnLease"
      />
    </div>
    <div class="leftBox">
      <div class="todoBox">
        <CommonTitle titleName="我的待办" class="m-b10"></CommonTitle>
        <div class="listBox">
          <div
            class="listItmeBox cursor"
            v-for="(n, i) in todoListArr"
            :key="i"
            @click="goAssetMng(i)"
          >
            <div class="msg-circle" v-show="n.value>0"></div>
            <div class="listItmeTitleBox">
              {{ n.title }}
            </div>
            <div class="listItmeCnBox" style="">{{ n.value }} 条</div>
          </div>
        </div>
      </div>
      <div class="controlBox">
        <CommonTitle titleName="资产租控" class="m-b10"></CommonTitle>
        <div class="ctrChartBox">
          <ControlEchart @getChartInfoObj="getChartInfoObj"></ControlEchart>
          <div class="ctrInfoBox">
            <span>共 {{ ctrChartInfoObj?.totalNum }} 处</span>
            <el-divider class="ctrInfoDivider" direction="vertical" />
            <span
              >{{ ctrChartInfoObj?.totalAreaObj?.value }}
              {{ ctrChartInfoObj?.totalAreaObj?.unit }}</span
            >
          </div>
          <div class="ctrBottomBox">
            <el-row>
              <el-col :span="12">
                <div class="pointBox m-r5" style="background: #fc7018"></div>
                <span class="titleBox m-r5">出租</span>
                <span class="numBox"
                  >{{ ctrChartInfoObj?.haveLetedNum }} 处
                  <el-divider class="ctrBottomDivider" direction="vertical" />
                  {{ ctrChartInfoObj?.letedAreaObj?.value }}
                  {{ ctrChartInfoObj?.letedAreaObj?.unit }}</span
                >
              </el-col>
              <el-col :span="12">
                <span class="titleBox m-r5">产生收益</span>
                <span class="numBox"
                  >{{ ctrChartInfoObj?.incomeObj?.value }}
                  {{ ctrChartInfoObj?.incomeObj?.unit }}/月</span
                >
              </el-col>
              <el-col :span="12" class="d-flex a-center j-center">
                <div class="pointBox m-r5" style="background: #ffefeb"></div>
                <span class="titleBox m-r5">空闲</span>
                <div class="numBox d-flex a-center"
                  >{{ ctrChartInfoObj?.freeNum }} 处
                  <el-divider class="ctrBottomDivider" direction="vertical" />
                  {{ ctrChartInfoObj?.freeAreaObj?.value }}
                  {{ ctrChartInfoObj?.freeAreaObj?.unit }}</div
                >
              </el-col>
              <el-col :span="12">
                <!-- <span class="titleBox m-r5" style="">预计收益</span>
                <span class="numBox">20.00万元/月</span> -->
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>

    <div class="rightBox">
      <CommonTitle titleName="资产分布" class="m-b10"></CommonTitle>
      <div class="boxStyle m-b30">
        <div class="titleBox m-b10">
          <img class="m-r20" src="@/assets/iconImg/star.png" alt="" />
          <span>高新区管委会</span>
        </div>
        <div class="contentBox">
          <div class="contentListBox" v-for="(n, i) in distributeArr" :key="i">
            <span class="listTitleBox">{{ n.street }} : </span>
            <span class="listDataBox m-l20"> {{ n.assetsNum }} 处</span>
            <el-divider class="dividerStyle" direction="vertical" />
            <span class="listDataBox">
              {{ n.assetsArea }} {{ n.assetsAreaUnit }}</span
            >
          </div>
        </div>
      </div>
      <CommonTitle titleName="资产类型占比" class="m-b10"></CommonTitle>
      <div class="boxStyle m-b10">
        <TypePercentEchart></TypePercentEchart>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, shallowRef, onMounted } from "vue";
import { ElDivider, ElRow, ElCol } from "element-plus";
import CommonTitle from "@/components/CommonTitle.vue";
import TypePercentEchart from "./components/typePercentEchart.vue";
import ControlEchart from "./components/controlEchart.vue";
import { useRouter } from "vue-router";
import { numToFixed } from "@/common/utils/GlobalUtils";
import { homeApi } from "@/api/home";

const router = useRouter();

// 资产分布数据
const distributeArr = ref([
  {
    street: "--街道",
    assetsNum: "0",
    assetsArea: "0.00",
    assetsAreaUnit: "平",
  },
]);
const mapPositionArr = ref([]);
// 各街道相对位置，没有数据的就不显示提示框。
// 由于所有街道信息暂时写死，后续有新的街道向此数组中添加即可。
// 不过根据提供的地图及现实情况，街道数也是固定的，应该不会变动。
const mapPointsArr = ref([
  {
    // left: "270px",
    // top: "30px",
    left: "1.4rem",
    top: "0.16rem",
    name: "肖家河街道",
    assetsNum: "-",
    assetsArea: "-",
    assetsAreaUnit: "-",
  },
  {
    // left: "325px",
    // top: "90px",
    left: "1.7rem",
    top: "0.47rem",
    name: "芳草街街道",
    assetsNum: "-",
    assetsArea: "-",
    assetsAreaUnit: "-",
  },
  {
    // left: "430px",
    // top: "137px",
    left: "2.24rem",
    top: "0.71rem",
    name: "桂溪街道",
    assetsNum: "-",
    assetsArea: "-",
    assetsAreaUnit: "-",
  },
  {
    // left: "305px",
    // top: "220px",
    left: "1.56rem",
    top: "1.14rem",
    name: "石羊街道",
    assetsNum: "-",
    assetsArea: "-",
    assetsAreaUnit: "-",
  },
  {
    // left: "530px",
    // top: "445px",
    left: "2.7rem",
    top: "2.19rem",
    name: "中和街道",
    assetsNum: "-",
    assetsArea: "-",
    assetsAreaUnit: "-",
  },
  {
    // left: "90px",
    // top: "125px",
    left: "0.47rem",
    top: "0.65rem",
    name: "合作街道",
    assetsNum: "-",
    assetsArea: "-",
    assetsAreaUnit: "-",
  },
  {
    // left: "24px",
    // top: "60px",
    left: "0.13rem",
    top: "0.31rem",
    name: "西园街道",
    assetsNum: "-",
    assetsArea: "-",
    assetsAreaUnit: "-",
  },
]);
const initDistributeData = () => {
  homeApi.assetDistribution().then((res) => {
    const { code, data, msg } = res;
    if (code == 200) {
      if (data.length) {
        // 列表展示
        distributeArr.value = data.map((n, i) => {
          let getAreaVal = n.assetsArea;
          n.assetsArea = numToFixed(n.assetsArea, 2).split("&")[0];
          n.assetsAreaUnit = numToFixed(getAreaVal, 2).split("&")[1]
            ? numToFixed(getAreaVal, 2).split("&")[1] + "平"
            : "平";
          return n;
        });
        // 地图位置赋值
        mapPositionArr.value = mapPointsArr.value.map((m, j) => {
          distributeArr.value.map((o, k) => {
            if (m.name === o.street) {
              m.assetsNum = o.assetsNum;
              m.assetsArea = o.assetsArea;
              m.assetsAreaUnit = o.assetsAreaUnit;
            }
          });
          return m;
        });
      }
    }
  });
};

// 预警统计数据
const topItemArr = ref([
  {
    url: require("@/assets/iconImg/home-zujin1.png"),
    itemListArr: [
      {
        title: "租金收取",
        value: "0",
        unit: "家",
      },
      {
        title: "近30天应收",
        value: "0.00",
        unit: "元",
      },
    ],
  },
  {
    url: require("@/assets/iconImg/home-zujin3.png"),
    itemListArr: [
      {
        title: "合同到期",
        value: "0",
        unit: "个",
      },
      {
        title: "近6个月到期",
        value: "0.00",
        unit: "㎡",
      },
    ],
  },
  {
    url: require("@/assets/iconImg/home-zujin2.png"),
    itemListArr: [
      {
        title: "闲置资产",
        value: "0",
        unit: "处",
      },
    ],
  },
]);

// 资产租控
const ctrChartInfoObj = ref({}); // 定义空对象。 如果使用reactive，需要定义好里面的结构，ref则不需要。
const getChartInfoObj = (valObj) => {
  Object.keys(valObj).forEach((key) => {
    if (
      key === "totalAreaObj" ||
      key === "letedAreaObj" ||
      key === "freeAreaObj" ||
      key === "incomeObj"
    ) {
      if (valObj[key].value !== "0.00") {
        let newVal = valObj[key].value;
        valObj[key].value = numToFixed(valObj[key].value, 2).split("&")[0];
    valObj[key].unit = numToFixed(newVal, 2).split("&")[1]
          ? numToFixed(newVal, 2).split("&")[1] + valObj[key].unit
          : valObj[key].unit;
  }
    }
    ctrChartInfoObj.value[key] = valObj[key];
  });
};
const goItemPage = (index) => {
  switch (index) {
    case 0:
      router.push({ path: "/asset/management/managementIndex" });
      break;
    case 1:
      router.push({ path: "/asset/management/fileInformation" });
      break;
    case 2:
      router.push({ path: "/asset/management/fileInformation" });
      break;
    default:
      break;
  }
};
const initTopItemData = () => {
  homeApi.propertyEarlyWarning().then((res) => {
    const { code, data, msg } = res;
    if (code == 200) {
      // 租金收取数
      topItemArr.value[0].itemListArr[0].value = data.rentCollectionNum;
      //近30天应收金额
      topItemArr.value[0].itemListArr[1].value = numToFixed(
        data.rentCollectionMoney,
        2
      ).split("&")[0];
      topItemArr.value[0].itemListArr[1].unit = numToFixed(
        data.rentCollectionMoney,
        2
      ).split("&")[1]
        ? numToFixed(data.rentCollectionMoney, 2).split("&")[1] + "元"
        : topItemArr.value[0].itemListArr[1].unit;

      // 即将到期的合同数
      topItemArr.value[1].itemListArr[0].value = data.expiringSoonNum;
      // 近6个月到期面积
      topItemArr.value[1].itemListArr[1].value = numToFixed(
        data.expiringSoonArea,
        2
      ).split("&")[0];
      topItemArr.value[1].itemListArr[1].unit = numToFixed(
        data.expiringSoonArea,
        2
      ).split("&")[1]
        ? numToFixed(data.expiringSoonArea, 2).split("&")[1] + "㎡"
        : topItemArr.value[1].itemListArr[1].unit;

      // 闲置资产
      topItemArr.value[2].itemListArr[0].value = numToFixed(
        data.idleAssetsNum
      ).split("&")[0];
      topItemArr.value[2].itemListArr[0].unit = numToFixed(
        data.idleAssetsNum
      ).split("&")[1]
        ? numToFixed(data.idleAssetsNum).split("&")[1] + "处"
        : topItemArr.value[2].itemListArr[0].unit;
    }
  });
};

// 大按钮
const goNewLease = () => {
  router.push({ path: "/asset/collaborativeApproval/createXinZhuForm/index" });
};
const goReturnLease = () => {
  router.push({ path: "/asset/collaborativeApproval/createThrowLease" });
};

// 我的代办
const todoListArr = ref([
  {
    title: "应收核销",
    value: "--",
  },
  {
    title: "逾期催缴",
    value: "--",
  },
  {
    title: "物业验收",
    value: "--",
  },
]);
const initTodoData = () => {
  homeApi.myToDo().then((res) => {
    const { code, data, msg } = res;
    if (code == 200) {
      todoListArr.value[0].value = data.receivableCollectionNum;
      todoListArr.value[1].value = data.overdueCollectionNum;
      todoListArr.value[2].value = data.propertyAcceptanceNum;
    }
  });
};
const goAssetMng = (index) => {
  switch (index) {
    case 0:
      router.push({ path: "/asset/management/managementIndex" });
      break;
    case 1:
      router.push({ path: "/asset/management/managementIndex" });
      break;
    case 2:
      router.push({ path: "/asset/management/managementIndex" });
      break;
    default:
      break;
  }
};

onMounted(() => {
  initDistributeData();
  initTopItemData();
  initTodoData();
});
</script>

<style lang="scss" scoped>
.bigDataPage {
  // height: calc(100% - 65px); // 减去: 面包屑高度(40px) + margin-bottom(20px) + 部分零碎高度(5px)
  height: calc(100% - 66px); // 减去: 面包屑高度(34px) + margin-bottom(20px)
  position: relative;
  .mapBox {
    width: 711px;
    // height: 665px;
    height: calc(100% - 90px);
    position: relative;
    // top: 100px;
    top: 85px;
    left: 47%;
    transform: translate(-50%);
    background: url("@/assets/iconImg/map.png") no-repeat;
    background-size: 100% 100%;
    background-position: 0px 25px;
    .mapInfoBox {
      width: 110px;
      height: 60px;
      position: absolute;
      background: url("@/assets/iconImg/home-map-info-bg.png") no-repeat;
      background-size: 120% 120%;
      display: flex;
      flex-direction: column;
      line-height: 20px;
      align-items: center;
      font-size: 12px;
      background-position: top;
      .mapInfoName {
        margin-top: 7px;
      }
      .mapInfoDivider {
        height: 12px;
        margin: -3px 4px 0;
      }
    }
    .hideMapInfo {
      display: none;
    }
  }
  .topBox {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    .itemStyle {
      width: 296px;
      // height: 95px;
      padding: 15px 28px 25px 28px;
      background: url("@/assets/iconImg/babian.png") no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      img {
        width: 40px;
        height: 40px;
      }
      .itemListStyle {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-left: 15px;
        .listBox {
          flex: 1;
          margin-bottom: 6px;
          overflow: hidden;
          display: flex;
          align-items: center;
          .listTitleBox {
            display: inline-block;
            width: 75px;
            font-size: 12px;
          }
          .listValueBox {
            font-size: 20px;
            font-family: SourceHanSansMedium;
            font-weight: 500;
            color: #fc7018;
          }
        }
      }
    }
  }
  .bigBtnBox {
    position: absolute;
    top: 0;
    right: 455px;
    display: flex;
    flex-direction: column;
    img {
      width: 216px;
      height: 88px;
      cursor: pointer;
    }
  }
  .rightBox {
    width: 380px;
    // height: 100%;
    height: calc(100% - 90px);
    // display: flex;
    // flex-direction: column;
    position: absolute;
    right: 10px;
    top: 5px;
    .boxStyle {
      // flex: 1;
      height: 50%;
      background: url("@/assets/iconImg/border.png") no-repeat;
      background-size: 107% 105%;
      background-position: -12px -7px;
      padding: 15px 20px;
    }
    .titleBox {
      font-weight: 400;
      color: #333333;
      font-size: 14px;
      img {
        width: 26px;
        height: 26px;
        vertical-align: middle;
      }
    }
    .contentBox {
      height: 87%;
      display: flex;
      flex-direction: column;
      .contentListBox {
        margin-bottom: 6%;
        .listTitleBox {
          width: 100px;
          display: inline-block;
          margin-left: 46px;
          color: #666;
          font-size: 14px;
        }
        .listDataBox {
          color: #333;
          font-weight: bold;
          font-size: 14px;
          font-family: SourceHanSansMedium;
        }
        .dividerStyle {
          width: 3px;
          background: #333;
          margin: -3px 15px 0;
        }
      }
    }
  }
  .leftBox {
    height: calc(100% - 105px); // 减去 ：topBox(95px) + 定位高度差(10px)
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 14px;
    top: 110px;
    padding-bottom: 10px;
    .todoBox {
      flex: 6;
      opacity: 0.9;
      .listBox {
        width: 296px;
        height: 95%;
        background: url("@/assets/iconImg/border.png") no-repeat;
        background-size: 106% 104%;
        background-position: -7px -5px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        padding-bottom: 13px;
        .listItmeBox {
          width: 80%;
          height: 40px;
          background: url("@/assets/iconImg/content-border.png") no-repeat;
          background-size: 100% 100%;
          display: flex;
          .listItmeTitleBox {
            flex: 2;
            line-height: 40px;
            text-align: center;
            font-size: 14px;
          }
          .listItmeCnBox {
            flex: 3;
            line-height: 40px;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            color: #f12527;
            font-family: SourceHanSansMedium;
          }
          .msg-circle{
            width: 8px;
            height: 8px;
            background: #F12527;
            border-radius: 50%;
          }
        }
      }
    }
    .controlBox {
      flex: 7;
      margin-top: 20px;
      .ctrChartBox {
        width: 455px;
        height: 92%;
        background: url("@/assets/iconImg/border.png") no-repeat;
        background-size: 108% 106%;
        background-position: -13px -10px;
        padding: 0 10px 10px 10px;
        .ctrInfoBox {
          font-size: 14px;
          text-align: center;
          margin-top: -6px;
          margin-bottom: 15px;
          .ctrInfoDivider {
            height: 14px;
          }
        }
        .ctrBottomBox {
          font-size: 16px;
          .pointBox {
            width: 11px;
            height: 11px;
            border-radius: 50%;
            display: inline-block;
          }
          .titleBox {
            color: #666;
          }
          .numBox {
            font-size: 18px;
            font-family: SourceHanSansMedium;
            color: $title-big-color;
            .ctrBottomDivider {
              height: 18px;
              width: 2px;
              margin-top: -2px;
              background-color: #1a1a1a;
            }
          }
          .el-row {
            .el-col {
              text-align: center;
              margin-bottom: 15px;
            }
          }
        }
      }
    }
  }
}
</style>
